﻿@page "/docs/helpers/sizes"

<DocsPageTitle>
    Sizes
</DocsPageTitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Size">
        <Paragraph>Defines an element size.</Paragraph>
        <ul>
            <li><Code>None</Code> Don’t resize an element.</li>
            <li><Code>ExtraSmall</Code> Makes an element extra small size.</li>
            <li><Code>Small</Code> Makes an element small size.</li>
            <li><Code>Medium</Code> Makes an element medium size.</li>
            <li><Code>Large</Code> Makes an element large.</li>
            <li><Code>ExtraLarge</Code> Makes an element extra large.</li>
        </ul>
    </DocsPageSectionHeader>
    <Alert Color="Color.Info" Visible="true">
        <AlertDescription>Keep in mind: All elements have a size <Code>None</Code> specified by default.</AlertDescription>
    </Alert>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="ButtonSize">
        <Paragraph>Defines a button size.</Paragraph>
        <ul>
            <li><Code>None</Code> No sizing will be applied to the button.</li>
            <li><Code>Small</Code> Makes a button to appear smaller.</li>
            <li><Code>Large</Code> Makes a button to appear larger.</li>
        </ul>
    </DocsPageSectionHeader>
    <Alert Color="Color.Info" Visible="true">
        <AlertDescription>Keep in mind: All elements have a size <Code>None</Code> specified by default.</AlertDescription>
    </Alert>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="ModalSize">
        <Paragraph>Changes the size of the modal.</Paragraph>
        <ul>
            <li><Code>Default</Code> Default modal size for current provider.</li>
            <li><Code>Small</Code> Small modal.</li>
            <li><Code>Large</Code> Large modal.</li>
            <li><Code>ExtraLarge</Code> Extra large modal.</li>
        </ul>
    </DocsPageSectionHeader>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="FigureSize">
        <Paragraph>Defines the size of the figure component.</Paragraph>
        <ul>
            <li><Code>None</Code> No sizing applied.</li>
            <li><Code>Is16x16</Code> 16x16 px</li>
            <li><Code>Is24x24</Code> 24x24 px</li>
            <li><Code>Is32x32</Code> 32x32 px</li>
            <li><Code>Is48x48</Code> 48x48 px</li>
            <li><Code>Is64x64</Code> 64x64 px</li>
            <li><Code>Is96x96</Code> 96x96 px</li>
            <li><Code>Is128x128</Code> 128x128 px</li>
            <li><Code>Is256x256</Code> 256x256 px</li>
            <li><Code>Is512x512</Code> 512x512 px</li>
        </ul>
    </DocsPageSectionHeader>
</DocsPageSection>